<template>
  <div class="LogManagement">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dUpMain">

      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px':'top: 100px;padding:10px'"
        >
          <!-- 此处开始页面 -->
          <template>
            <el-tabs
              v-model="activeName"
              type="card"
              @tab-click="handleClick"
            >
              <el-tab-pane
                label="数据同步日志"
                name="first"
              >
                <template>
                  <el-table
                    :data="tableData"
                    style="width: 100%"
                    @row-click="PTable_click"
                    ref="evtTable"
                    :row-key='getRowKeys'
                    :expand-row-keys="expands"
                    @expand-change="getFacilityList"
                    v-loading="loading"
                    height="600"
                  >
                    <el-table-column type="expand">
                      <template slot-scope="props">
                        <el-table
                          :data="tableData_a"
                          style="margin-left:50px;padding-right:50px"
                          :header-cell-style="{background:'#ccc !important', color:'#000'}"
                          v-loading="loading_a"
                        >
                          <el-table-column
                            label="任务编码"
                            prop="SubCode"
                            width="180px"
                          >
                            <template slot-scope="scope">
                              <span
                                class="table_childStyle"
                                :title="scope.row.SubCode"
                              >{{scope.row.SubCode}}</span>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="任务名称"
                            prop="SubName"
                            width="230px"
                          >
                          </el-table-column>
                          <el-table-column
                            label="执行状态"
                            prop="StatusName"
                            width="110px"
                          >
                          </el-table-column>
                          <el-table-column
                            label="级别"
                            prop="MessageLevel"
                            width="50px"
                          >
                          </el-table-column>
                          <el-table-column
                            label="信息"
                            prop="Message"
                            width="90px"
                            align="center"
                          >
                            <template slot-scope="scope">
                              <el-button
                                size="mini"
                                @click="openMsg(scope.row)"
                              >查看信息</el-button>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="患者主索引"
                            prop="PatientCode"
                            width="165px"
                          >
                          </el-table-column>
                          <el-table-column
                            label="住院号"
                            prop="AdmissionNo"
                            width="145px"
                          >
                          </el-table-column>
                          <el-table-column
                            label="生成时间"
                            prop="GenerateTime"
                            width="180px"
                          >
                            <template slot-scope="scope">
                              {{scope.row.GenerateTime}}
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="最近执行时间"
                            prop="LastTime"
                            width="180px"
                          >
                          </el-table-column>
                          <el-table-column
                            align="center"
                            label="操作"
                            width="70px"
                          >
                            <template slot-scope="scope">
                              <el-button
                                :disabled="scope.row.QueueStatus == 3"
                                size="small"
                                @click="edit_item(scope.row.SubCode)"
                              >重试</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                        <div class="block">
                          <el-pagination
                            layout="prev, pager, next"
                            :total="page_a_a.total"
                            :page-size="page_a_a.limit"
                            @current-change="table_a_a_pagChange"
                          >
                          </el-pagination>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="任务编码"
                      prop="QueueCode"
                    >
                    </el-table-column>
                    <el-table-column
                      label="任务名称"
                      prop="QueueName"
                    >
                    </el-table-column>
                    <el-table-column
                      label="执行状态"
                      prop="QueueStatus"
                    >
                    </el-table-column>
                    <el-table-column
                      label="备注"
                      prop="Remark"
                    >
                    </el-table-column>
                    <el-table-column
                      label="生成时间"
                      prop="GenerateTime"
                    >
                    </el-table-column>
                  </el-table>
                </template>
                <div class="block num">
                  <el-pagination
                    layout="prev, pager, next"
                    :total="page_a.total"
                    :page-size="page_a.limit"
                    @current-change="table_a_pagChange"
                  >
                  </el-pagination>
                </div>
              </el-tab-pane>
              <!-- 操作日志页面 -->
              <el-tab-pane
                label="操作日志"
                name="second"
              >
                <el-input
                  class="input_style"
                  size="small"
                  v-model="search_table_b"
                ></el-input>
                <el-button
                  style="margin-left:15px"
                  size="small"
                  @click="getTableData_b"
                >关键字搜索</el-button>
                <template>
                  <el-table
                    :data="tableData_b"
                    style="width: 100%;margin-top:5px"
                    v-loading="loading_b"
                    height="600"
                  >
                    <el-table-column
                      prop="LogTypeName"
                      label="类型"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="HospitalId"
                      label="医院id"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="SourceIp"
                      label="来源IP"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="ReqIp"
                      label="访问IP"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="ReqMethods"
                      label="访问方法"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="ReqParams"
                      label="访问参数"
                    >
                      <template slot-scope="scope">
                        <span
                          :title="scope.row.ReqParams"
                          class="isTableRow_style"
                        >{{scope.row.ReqParams}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="ReqFormat"
                      label="访问格式"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="ReqUser"
                      label="访问名称"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="ReqTime"
                      label="访问时间"
                      width="150px"
                    >
                      <template slot-scope="scope">
                        {{scope.row.ReqTime | data}}
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="RespStatus"
                      label="响应状态"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="RespContent"
                      label="响应内容"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="CreateTime"
                      label="创建时间"
                      width="150px"
                    >
                      <template slot-scope="scope">
                        {{scope.row.CreateTime | data}}
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
                <div class="block num">
                  <el-pagination
                    layout="prev, pager, next"
                    :total="page_b.total"
                    :page-size="page_b.limit"
                    @current-change="table_b_pagChange"
                  >
                  </el-pagination>
                </div>
              </el-tab-pane>
            </el-tabs>
          </template>
          <el-dialog
            title="信息"
            :visible.sync="dialogVisible"
            width="45%"
            :before-close="handleClose"
            :append-to-body="true"
            class="diaiog_body"
            :close-on-click-modal="false"
          >
            <div style="height:350px;overflow:auto">
              <el-timeline :reverse="true">
                <el-timeline-item
                  v-for="(activity, index) in msg"
                  :key="index"
                >
                  {{activity}}
                </el-timeline-item>
              </el-timeline>
            </div>
            <span
              slot="footer"
              class="dialog-footer"
              style="text-align:center;"
            >
              <el-button
                size="mini"
                @click="handleClose"
              >关 闭</el-button>
            </span>
          </el-dialog>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LogManagement",
  data () {
    return {
      activeName: 'first',
      tableData: [],
      loading: false,
      tableData_a: [],
      loading_a: false,
      tableData_b: [],
      loading_b: false,
      expands: [],
      page_a: { // 一级表格展示数据
        page: 1,
        limit: 10,
        total: 1
      },
      page_a_a: { // 二级表格展示数据
        page: 1,
        limit: 6,
        total: 1
      },
      queueCode: '',
      page_b: {// 操作日志展示数据
        page: 1,
        limit: 8,
        total: 1
      },
      search_table_b: '',
      dialogVisible: false,
      msg: []
    };
  },
  methods: {
    // tab栏切换事件
    handleClick (tab, event) {
      // console.log(tab, event);
    },
    // 父级表格行点击事件
    PTable_click (val) {
      // console.log(val);
      // this.$refs.evtTable.toggleRowExpansion(val);
    },
    getRowKeys: function (row) {
      return row.Id
    },
    // 获取子级数据
    getFacilityList (row, expandedRows) { // 表格展开行事件
      console.log(expandedRows);
      this.tableData_a = []
      if (expandedRows.length !== 0) {
        this.page_a_a.page = 1

        // console.log('获取当前行数据');
        // console.log(row);
        // this.getReceiver(row);//展开行的时候获取数据的方法
        var that = this
        if (expandedRows.length) {
          that.expands = []
          if (row) {
            that.expands.push(row.Id)
            this.queueCode = row.QueueCode
            this.getTableData_a()
          }
        }
        else {
          that.expands = []
        }
      }
    },
    // 子级重试操作
    edit_item (code) {
      this.$post("/Log/DataSyncSubCallback?subCode=" + code).then(res => {
        if (res.code == 0) {
          this.getTableData_a()
          this.$message({
            message: '操作成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      }).catch(err => {
        console.log(err);
      })
    },
    getTableData () {
      this.loading = true
      this.$post("/Log/DataSyncList?page=" + this.page_a.page + "&limit=" + this.page_a.limit).then(res => {
        if (res.code == 0) {
          this.tableData = res.data.list
          this.page_a.total = res.data.TotalCount
          this.loading = false
        } else if (res.code == -1) {
          this.$message.error(res.msg);
          this.loading = false
        }
      })
    },
    getTableData_a () {
      this.loading_a = true
      this.$post("/Log/DataSyncSubList?queueCode=" + this.queueCode + "&page=" + this.page_a_a.page + "&limit=" + this.page_a_a.limit).then(res => {
        if (res.code == 0) {
          this.tableData_a = res.data.list
          this.page_a_a.total = res.data.TotalCount
          this.loading_a = false
        } else if (res.code == -1) {
          this.$message.error(res.msg);
          this.loading_a = false
        }
      })
    },
    getTableData_b () {
      this.loading_b = true
      this.$post("/Log/OperationList?page=" + this.page_b.page + "&limit=" + this.page_b.limit + "&keyword=" + this.search_table_b).then(res => {
        if (res.code == 0) {
          this.tableData_b = res.data.list
          this.page_b.total = res.data.TotalCount
          this.loading_b = false
        } else if (res.code == -1) {
          this.$message.error(res.msg);
          this.loading_b = false
        }
      })
    },
    table_a_pagChange (val) {
      this.page_a.page = val
      this.getTableData()
    },
    table_a_a_pagChange (val) {
      this.page_a_a.page = val
      this.getTableData_a()
    },
    table_b_pagChange (val) {
      this.page_b.page = val
      this.getTableData_b()
    },
    openMsg (val) {
      // console.log(val);
      // this.msg = val.Message
      let arr = val.Message.split("^");
      // console.log(val.Message.split("^"));
      this.msg = arr
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
      this.msg = []
    },
  },
  filters: {
    data: function (input) {
      var d = new Date(input);
      var year = d.getFullYear();
      var month = d.getMonth() + 1;
      var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
      var hour = d.getHours();
      var minutes = d.getMinutes();
      var seconds = d.getSeconds();
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
    },
    conversion: function (value) {
      //调用Date的方法，处理时间戳
      return new Date(value).toLocaleString();
    }
  },
  mounted () {
    // document.getElementById("2").focus();
  },
  created () {
    if (this.$route.query.Token) {
      localStorage.setItem('Token', this.$route.query.Token)
    }
    this.getTableData_b()
    this.getTableData()
  }
};
</script>
<style lang="scss">
.LogManagement {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
  .twoBox {
    padding: 0 10px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .num {
    position: relative;
    left: 50%;
    bottom: 0%;
    transform: translateX(-50%);
    margin: 0 auto;
    text-align: center;
  }
  .input_style {
    display: inline-block;
    width: 20%;
  }
  .diaiog_body .el-dialog__body {
    height: 500px !important;
    overflow: auto;
  }
  .diaiog_body .el-dialog__footer {
    text-align: center;
  }
  .el-timeline-item {
    position: relative;
    padding-bottom: 15px;
  }
  ::-webkit-scrollbar {
    /*滚动条整体样式*/

    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/

    height: 10px;
  }
  .table_childStyle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .isTableRow_style {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
